import React, { useEffect, useRef, useState } from 'react'
import { View, Text, ScrollView, StyleSheet, } from 'react-native';
import { Field } from '../../components';
import BaseView from '../components/base-view'

const FieldDemo = () => {
  const [text, setText] = useState("")
  const [text1,setText1] = useState("")
  const [number,setNumber] = useState("")
  const [password,setPassword] = useState("")
  const [clearable,setClearable] = useState("")
  const [rightIcon,setRightIcon] = useState("")
  const [border1,setBorder1] = useState("")
  const [border2,setBorder2] = useState("")
  const [textarea,setTextarea] = useState("")
  const [textarea1,setTextarea1] = useState("")
  useEffect(() => {
    // console.log(text)
  }, [text])
  return (
    <ScrollView keyboardShouldPersistTaps="handled">
      <BaseView title="基础用法">
        <Field label="文本" placeholder="请输入" value={text} onInput={setText}></Field>
      </BaseView>
      <BaseView title="自定义类型">
        <Field label="文本" placeholder="请输入" value={text1} onInput={setText1}></Field>
        <Field label="数字" type="number" placeholder="请输入" value={number} onInput={setNumber}></Field>
        <Field label="密码" type="password" placeholder="请输入" value={password} onInput={setPassword}></Field>
      </BaseView>
      <BaseView title="禁用输入框">
        <Field label="禁用" disabled={true} placeholder="禁用输入框" value={text} clearable={true} onInput={setText}></Field>
      </BaseView>
      <BaseView title="带清除按钮">
        <Field label="清除" placeholder="带清除按钮" value={clearable} clearable={true} onInput={setClearable}></Field>
      </BaseView>
      <BaseView title="自定义图标">
        <Field label="图标" rightIcon="plus" placeholder="显示图标" value={rightIcon} onInput={setRightIcon}></Field>
      </BaseView>
      <BaseView title="是否显示边框">
        <Field label="边框" placeholder="默认显示边框" value={border1} onInput={setBorder1}></Field>
        <Field label="无边框" placeholder="不显示边框" border={false} value={border2} onInput={setBorder2}></Field>
      </BaseView>
      <BaseView title="多行文本框">
        {/* 备注需要设置最大高度即可 */}
        <Field type="textarea" 
        placeholder="多行文本框,最大长度500，显示字数统计" 
        showWordLimit={true} maxlength={500} value={textarea} onInput={setTextarea}></Field>
        <Field type="textarea" 
        style={{ maxHeight: 120 }} 
        placeholder="多行文本框,最大高度" value={textarea1} onInput={setTextarea1}></Field>
      </BaseView>
    </ScrollView>
  )
}

export default FieldDemo